<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="back/user/header">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
		<section class="content-header">
		<h1>用户管理</h1>
		</section>
		<section class="content table-content">
			<form class="form-inline" >
			<!-- 工具栏 -->
			<div id="toolbar">
					<input type="button" value="新增用户" id="addBtn" data-toggle="modal" data-target="#addUserModal" class="btn btn-primary"></input>
					<input type="button" value="修改用户" id="editBtn" data-toggle="modal" data-target="#editUserModal" class="btn btn-primary" onclick="editUser()"></input>
					<input type="button" value="删除用户" id="deleteBtn" data-toggle="modal" data-target="#deleteUserModal" class="btn btn-primary" onclick="deleteUser()"></input>
			</div>
			<!-- bootstrapTable -->
			</form>
			<table id="dataGrid">
			</table>
		</section>
		<!-- 新增用户的模态框，在修改用户中将获取一行的值放入input中，改变一些参数继续使用 -->
		<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h3>新增用户</h3>
					</div>
					<div class="modal-body">
						<form id="addUserForm" action="/user/addUser" method="post" class="form-horizontal">
							<div class="form-group">
								<label for="inputAccount" class="col-sm-2 control-label">账户</label>
								<div class="col-sm-7">
									<input type="account" name="account" class="form-control" id="inputAccount" placeholder="账户"/>
								</div>
								<label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group" >
								<label for="inputPassword" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-7">
									<input type="text" name="password" class="form-control" id="inputPassword" placeholder="密码"/>
								</div>
								<label id="errorPassword" for="inputPassword" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputName" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-7">
									<input type="name" name="name" class="col-sm-4 form-control" id="inputName" placeholder="姓名"/>
								</div>
								<label id="errorName" for="inputName" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputSex" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-7">
									<input type="sex" name="sex" class="col-sm-4 form-control" id="inputSex" placeholder="性别"/>
								</div>
								<label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputPhone" class="col-sm-2 control-label">手机</label>
								<div class="col-sm-7">
									<input type="phone" name="phone" class="col-sm-4 form-control" id="inputPhone" placeholder="手机"/>
								</div>
								<label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
								<div class="col-sm-7">
									<input type="email" name="email" class="col-sm-4 form-control" id="inputEmail" placeholder="邮箱"/>
								</div>
								<label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" id="conf" class="btn btn-default" onclick="addUser()">确定</button>
						<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
					</div>
				</div>				
			</div>
		</div>
		<!-- 修改用户的模态框 -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h3>修改用户</h3>
					</div>
					<div class="modal-body">
						<form id="editForm" method="post" class="form-horizontal">
							<div class="form-group" style="display:none">
								<label for="editId" class="col-sm-2 control-label">ID</label>
								<div class="col-sm-7">
									<input type="id" name="id"   class="form-control" id="editId" placeholder="ID" />
								</div>
								<label id="errorId" for="editId" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputAccount" class="col-sm-2 control-label">账户</label>
								<div class="col-sm-7">
									<input type="account" name="account" class="form-control" id="editAccount" placeholder="账户"/>
								</div>
								<label id="errorAccount" for="inputAccount" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group" >
								<label for="inputPassword" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-7">
									<input type="text" name="password" class="form-control" id="editPassword" placeholder="密码"/>
								</div>
								<label id="errorPassword" for="inputPassword" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputName" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-7">
									<input type="name" name="name" class="col-sm-4 form-control" id="editName" placeholder="姓名"/>
								</div>
								<label id="errorName" for="inputName" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputSex" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-7">
									<input type="sex" name="sex" class="col-sm-4 form-control" id="editSex" placeholder="性别"/>
								</div>
								<label id="errorSex" for="inputSex" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputPhone" class="col-sm-2 control-label">手机</label>
								<div class="col-sm-7">
									<input type="phone" name="phone" class="col-sm-4 form-control" id="editPhone" placeholder="手机"/>
								</div>
								<label id="errorPhone" for="inputPhone" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
								<div class="col-sm-7">
									<input type="email" name="email" class="col-sm-4 form-control" id="editEmail" placeholder="邮箱"/>
								</div>
								<label id="errorEmail" for="inputEmail" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group">
								<label for="inputStates" class="col-sm-2 control-label">状态</label>
								<div class="col-sm-7">
									<input type="states" name="states" class="col-sm-4 form-control" id="editStates" placeholder="状态"/>
								</div>
								<label id="errorStates" for="inputStates" class="col-sm-3 control-label"></label>
							</div>
							<div class="form-group" style="display:none">
								<label for="inputCreated_at" class="col-sm-2 control-label">创建时间</label>
								<div class="col-sm-7">
									<input type="created_at" name="created_at" class="col-sm-4 form-control" id="editCreated_at" placeholder="创建时间" />
								</div>
								<label id="errorCreated_at" for="inputCreated_at" class="col-sm-3 control-label"></label>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" id="conf" class="btn btn-default" onclick="updateUser()">确定</button>
						<button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetAddModal()">取消</button>
					</div>
				</div>				
			</div>
		</div>
		<div class="modal fade" id="Tip" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h3>提示</h3>
					</div>
					<div class="modal-body" align="center">
						<h4 id="tipContent">新增成功</h4>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="updateEnd" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h3>提示</h3>
					</div>
					<div class="modal-body" align="center">
						<h4 id="al">修改成功</h4>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>
		<div th:include="back/user/footer"></div>
</body>

</html>
